/* eslint-disable vue/no-deprecated-slot-attribute */
<template>
  <ElementDialog title="整改措施" :close-on-click-modal="false" width="95%" top="5%" :visible.sync="visible">
    <ElRow :span="24">
      <ElCol :xs="24" :sm="24" :md="5" class="info__tree">
        <FyTree :option="treeOption" :data="treeData" @node-click="nodeClick">
          <template #default="{ node, data }">
            <span class="el-tree-node__label">
              <ElTooltip v-if="data.isLock" class="item" effect="dark" content="无数据权限" placement="right-start">
                <span>{{ node.label }} <i class="el-icon-lock"></i></span>
              </ElTooltip>
              <span v-if="!data.isLock">{{ node.label }}</span>
            </span>
          </template>
        </FyTree>
      </ElCol>
      <ElCol :xs="24" :sm="24" :md="19" class="info__main">
        <FyCurd
          ref="crud"
          :page.sync="page"
          :data="tableData"
          :permission="permissionList"
          :table-loading="tableLoading"
          :option="tableOption"
          @selection-change="selectionChange"
          @on-load="getList"
          @search-change="searchChange"
          @refresh-change="refreshChange"
          @size-change="sizeChange"
          @current-change="currentChange"
          @row-update="handleUpdate"
          @row-save="handleSave"
          @row-del="handleDel" />
      </ElCol>
    </ElRow>
    <template #footer>
      <span class="dialog-footer">
        <ElButton @click="visible = false">取消</ElButton>
        <ElButton type="primary" @click="checkRowData">确定</ElButton>
      </span>
    </template>
  </ElementDialog>
</template>

<script>
  import { addObj, delObj, fetchList, putObj } from '@/api/problem/infor'
  import { tree } from '@/api/problem/cti'
  import { mapState } from 'vuex'

  export default {
    name: 'Infor',
    props: {
      // 允许选择的条数
      allowChooseNum: {
        type: Number,
        default: 1
      }
    },
    data() {
      return {
        searchForm: {},
        tableData: [],
        page: {
          total: 0, // 总页数
          currentPage: 1, // 当前页数
          pageSize: 20 // 每页显示多少条
        },
        treeOption: {
          nodeKey: 'id',
          addBtn: false,
          menu: false,
          props: {
            label: 'name',
            value: 'id'
          }
        },
        treeData: [],
        tableLoading: false,
        tableOption,
        visible: false,
        resultData: []
      }
    },
    computed: {
      ...mapState('user', ['permissions']),
      permissionList() {
        return {
          addBtn: this.$isEmpty(this.permissions.problem_infor_add, false),
          delBtn: this.$isEmpty(this.permissions.problem_infor_del, false),
          editBtn: this.$isEmpty(this.permissions.problem_infor_edit, false)
        }
      }
    },
    created() {
      // this.init()
    },
    methods: {
      init() {
        this.visible = true
        tree().then(response => {
          this.treeData = response.data.data
        })
      },
      nodeClick(data) {
        this.page.page = 1
        // console.log(data)
        this.getList(this.page, { ctiName: data.name })
      },
      // 列表查询
      getList(page, params) {
        this.tableLoading = true
        fetchList(
          Object.assign(
            {
              current: page.currentPage,
              size: page.pageSize
            },
            params,
            this.searchForm
          )
        )
          .then(response => {
            this.tableData = response.data.data.records
            this.page.total = response.data.data.total
            this.tableLoading = false
          })
          .catch(() => {
            this.tableLoading = false
          })
      },
      // 删除
      handleDel: function (row, index) {
        this.$confirm(`是否确认删除ID为${row.id}`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            return delObj(row.id)
          })
          .then(data => {
            this.$message.success('删除成功')
            this.getList(this.page)
          })
      },
      // 更新
      handleUpdate: function (row, index, done, loading) {
        putObj(row)
          .then(data => {
            this.$message.success('修改成功')
            done()
            this.getList(this.page)
          })
          .catch(() => {
            loading()
          })
      },
      // 保存
      handleSave: function (row, done, loading) {
        if (row.ctiId === undefined || Number.isNaN(row.ctiId)) {
          this.$message.success('请选择问题分类')
          return
        }
        addObj(row)
          .then(data => {
            this.$message.success('添加成功')
            done()
            this.getList(this.page)
          })
          .catch(() => {
            loading()
          })
      },
      // 每页条数改变事件
      sizeChange(pageSize) {
        this.page.pageSize = pageSize
      },
      // 当前页发生改变事件
      currentChange(current) {
        this.page.currentPage = current
      },
      // 查询事件
      searchChange(form, done) {
        this.searchForm = form
        this.page.currentPage = 1
        this.getList(this.page, form)
        done()
      },
      // 刷新事件
      refreshChange() {
        this.getList(this.page)
      },
      selectionChange(list) {
        if (this.allowChooseNum > 0) {
          if (list.length > this.allowChooseNum) {
            this.toggleSelection()
            this.$message.success(`只能选择${this.allowChooseNum}条`)
            return
          }
        }
        this.resultData = list
      },
      // 返回选择的行数据
      checkRowData() {
        this.$emit('getProblemInfoData', this.resultData)
        this.visible = false
      },
      toggleSelection(val) {
        this.$refs.crud.toggleSelection(val)
      }
    }
  }

  const tableOption = {
    border: true,
    index: true,
    indexLabel: '序号',
    stripe: true,
    menuAlign: 'center',
    align: 'center',
    searchMenuSpan: 6,
    searchShow: false,
    selection: true,
    menuWidth: 230,
    addBtn: false,
    menu: false,
    column: [
      {
        type: 'year',
        label: '年度',
        prop: 'year',
        span: 12,
        display: true,
        format: 'yyyy',
        valueFormat: 'yyyy',
        search: true
      },
      {
        type: 'input',
        label: '问题单号',
        prop: 'number',
        span: 12,
        display: false,
        search: true,
        width: 150
      },
      {
        type: 'input',
        label: '分类名称',
        prop: 'ctiName',
        formslot: true,
        search: true,
        span: 12,
        width: 150
      },
      {
        type: 'input',
        label: '来源',
        prop: 'source',
        span: 12
      },
      {
        type: 'date',
        label: '完成时间',
        prop: 'completionDate',
        span: 12,
        display: true,
        search: true,
        width: 150,
        format: 'yyyy-MM-dd',
        valueFormat: 'yyyy-MM-dd',
        searchRange: true
      },
      {
        type: 'select',
        label: '状态',
        search: true,
        dicData: [
          {
            label: '草稿',
            value: 0
          },
          {
            label: '处理中',
            value: 1
          },
          {
            label: '以完成',
            value: 2
          },
          {
            label: '作废',
            value: '4'
          }
        ],
        span: 12,
        display: true,
        props: {
          label: 'label',
          value: 'value'
        },
        prop: 'status',
        value: 0,
        cascaderItem: []
      },
      {
        type: 'textarea',
        label: '问题描述',
        prop: 'infor',
        span: 24,
        display: true,
        width: 250
      },
      {
        type: 'textarea',
        label: '整改情况',
        prop: 'rectification',
        span: 24,
        display: true,
        width: 250
      },
      {
        type: 'textarea',
        label: '备注',
        prop: 'remarks',
        span: 24,
        display: true,
        width: 250
      }
    ]
  }
</script>

<style lang="scss">
  .info {
    height: 100%;

    &__tree {
      padding-top: 3px;
      padding-right: 20px;
    }

    &__main {
      .el-card__body {
        padding-top: 0;
      }
    }
  }
</style>
